<extend name="Index/index" />

<block name="link">
    <title>Store</title>
    <meta charset="utf-8">
    <!-- <link href="__PUBLIC__/store_public/css/global.css" rel="stylesheet" type="text/css" /> -->
    <link href="__PUBLIC__/store_public/css/global_schinese.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/publicheader.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/storeheader.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/store.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/store_featured.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/valvefooter.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/store1.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/cart.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/store_public/js/jquery-1.7.1.min.js"></script>
    <style>
        .rank0{background-image: linear-gradient(rgb(176, 195, 217), rgb(38, 42, 45)), linear-gradient(rgb(176, 195, 217), rgb(38, 42, 45)); border-top-color: rgb(176, 195, 217);}
        .rank5{background-image: linear-gradient(rgb(176, 195, 217), rgb(38, 42, 45)), linear-gradient(rgb(176, 195, 217), rgb(38, 42, 45)); border-top-color: rgb(176, 195, 217);}
        .rank1{background-image: linear-gradient(rgb(75, 105, 255), rgb(38, 42, 45)), linear-gradient(rgb(75, 105, 255), rgb(38, 42, 45)); border-top-color: rgb(75, 105, 255);}
        .rank2{background-image: linear-gradient(rgb(173, 229, 92), rgb(38, 42, 45)), linear-gradient(rgb(173, 229, 92), rgb(38, 42, 45)); border-top-color: rgb(173, 229, 92);}
        .rank3{background-image:linear-gradient(rgb(136, 71, 255), rgb(38, 42, 45)), linear-gradient(rgb(136, 71, 255), rgb(38, 42, 45)); border-top-color: rgb(136, 71, 255);}
        .rank4{background-image: linear-gradient(rgb(211, 44, 230), rgb(38, 42, 45)), linear-gradient(rgb(211, 44, 230), rgb(38, 42, 45)); border-top-color: rgb(211, 44, 230);}
        .portrait{background-size: 80px 46px;background-repeat: no-repeat;width: 80px;height: 46px;padding-top: 10px;}
        .name{font-size: 18px;line-height: 22px;color: #beb7b4;margin-bottom: 6px;}
        .rarity{font-size: 18px;color: #071215;font-family: Arial;}
        .rarityCell {height: 24px;margin: 12px 0px 12px -12px;width: 304px;}
        /*传说*/
        .rarityLegendary{background: linear-gradient(to right, #8b1d98 0%,#d32ce6 36%,#d32ce6 64%,#8b1d98 100%);}
        /*神话*/
        .rarityMythical{background: linear-gradient(to right, #5b2faa 0%,#8847ff 36%,#8847ff 64%,#5b2faa 100%);}
        /*至宝*/
        .rarityArcana{background: linear-gradient(to right, #759a3e 0%,#ade55c 36%,#ade55c 64%,#759a3e 100%);}
        /*稀有*/
        .rarityRare{background: linear-gradient(to right, #273dad 0%,#395aff 36%,#395aff 64%,#273dad 100%);}
        /*普通*/
        .rarityCommon{background: linear-gradient(to right, #8694a5 0%,#b0c3d9 36%,#b0c3d9 64%,#8694a5 100%);}
    </style>
</block>

<block name="main">
    </head>

    <body class="MainBackgroundImage">
        <div class="StorePageBody" class="Hidden">
            <!-- StoreContainer start -->
            <div class="StoreContainer">
                <div class="StoreContainerBg"></div>
                <div id="StoreTabs">
                    <span id="StoreTabButtons">
                        <a href="<{:U('Home/Store/index')}>" class="StoreTab DarkGrayButton NoSelect StoreTabMenuButton ">主打</a>
                        <a href="<{:U('Home/Store/list?list=1')}>" <if condition="$mark eq 1">class="StoreTab NoSelect  StoreTabActive GrayButton"<else />class="StoreTab DarkGrayButton NoSelect StoreTabMenuButton" 
                        </if>>英雄套装</a>
                        <a href="<{:U('Home/Store/list?list=2')}>"  <if condition="$mark eq 2">class="StoreTab NoSelect  StoreTabActive GrayButton"<else />class="StoreTab DarkGrayButton NoSelect StoreTabMenuButton"
                        </if>>
                        物品</a>
                        <a href="<{:U('Home/Store/list?list=3')}>"  <if condition="$mark eq 3">class="StoreTab NoSelect  StoreTabActive GrayButton"<else />class="StoreTab DarkGrayButton NoSelect StoreTabMenuButton" 
                        </if>>职业商店</a>
                        <span class="LowerBg"></span>
                    </span>
                    <span class="StoreTabPadding"></span>
                    <div id="StoreSearchForm">
                        <form action="<{:U('Home/Store/list?list=search')}>" method="post" name="form1" id="form1">
                        <input type="text" id="StoreSearchInput" autocomplete="off" spellcheck="false" placeholder="搜索" name="search"/>
                        <div id="storeSearchButton" class="glyphicon glyphicon-search" style="position: absolute;top: 5px;right: 5px;width: 19px;height: 19px;background-image: url(http://cdn.dota2.com.cn/apps/dota2/images/store/icon_search.png?1);background-size: 19px 19px;background-repeat: no-repeat;pointer-events: none;font-family: Arial;"></div>
                    </form>
                    </div>

                    <div id="CartButton" class="NoSelect CartHeaderButton NoItems">
                        <span id="CartButtonText" class="">
                            <div id="CartButtonTextIcon"></div>
                            <a href="<{:U('Home/Cart/index')}>">购物车</a>
                        </span>
                        </span>
                    </div>
                </div>

                <!-- ContentContainer  start -->
                <div id="ContentContainer">
                    <!-- Featured start -->
                    <div id="Featured" class="Hidden" style="display: block;">
                        <!-- 主体左半边部分 -->
                        <div class="LeftColumn" style="display:block;">
                            <div class="MainFeaturedItemViewContainer FeaturedViewBottomPadding FeaturedContainer_Base" id="MainFeaturedItemViewContainer" style="width:932px;height:auto;">
                                <!--商品内容 每行3个 -->
                                <div id="MiniGridViews" style="display:block;">
                                    <div id="NewReleasesView">
                                        <volist name="list" id="vo">
                                            <div data-defindex="20985" id="NR_20985" data-shouldhighlight="1" data-sourcehistory="c9" class="ItemContainerCell_Base ItemContainerCell">
                                                <a href="<{:U('Home/Store/detail?gid='.$vo['g_id'])}>" class="ItemImage_Base ItemImage NoSelect ItemDetailsMiniPopupBorderInactive" data-image-loaded="0">
                                                    <img class="ItemImageDropShadow" src="/Uploads/Store/<{$vo.g_icon}>"
                                                    style="opacity: 1;" />
                                                </a>
                                                <div id="myhidden" class="Hidden"><{$vo.g_rank}></div>
                                                <div class="Hidden myhiddenid"><{$vo.g_id}></div>
                                                <div class="ItemText_Base ItemText">
                                                    <div class="ItemName_Base Name">
                                                        <{$vo.g_name}>
                                                    </div>
                                                    <div class="PlayerClass">
                                                        <{$vo.g_type}>
                                                    </div>
                                                    <span class="Price"><{$vo.price}> 刀币</span>
                                                </div>
                                                <div class="HoverContentContainer_Base HoverContentContainer" style="display: none" onclick="addCart()" data-toggle="modal" data-target="#myModal">
                                                    <a class="NoSelect GreenButton BigButton HoverAddToCartButton NoColorTransition">
                                                        <img src="__PUBLIC__/store_public/picture/cart.png" class="SmallCartIcon" style="opacity: 1;margin-bottom:8px;" /><span class="ButtonPrice"><{$vo.price}> 刀币</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </volist>
                                    </div>
                                </div>

                            </div>
                            </div>
                        </div>

                    </div>
                    <!-- Featured end -->
                </div><!-- ContentContainer  end -->

            </div><!-- StoreContainer end -->
            <div class="ValveFooter"></div>
        </div>
        <!-- StorePageBody end -->
        
        <div id="ItemDetailsMiniPopup" style="left: 474px; top: 210px; display: none;">
            <div class="name">2016年秋季珍藏 IV</div>
            <div class="SetInfo" style="display: none;">
                <div class="SetNameContainer">属于
                    <span class="SetName"></span>
                </div>
                <div class="SetCountInfo">1 /
                    <span class="SetItemCount"></span>
                </div>
            </div>
            <div class="rarityCell rarityMythical" id="rarity">
                <div class="rarity">神话</div>
            </div>
            <div class="PortraitContainer">
                <span class="UsageType">类型：<br />槽位：</span>
                <span class="UsageInfo">
                    <span class="UsageInfo_usedBy">所有英雄</span>
                <br />
                <span class="UsageInfo_Slot">无</span>
                </span>
                <div class="portrait" style="background-image: url();"></div>
            </div>
            <div class="NoticeInfo" style="display: none;">
                <div class="NoticeIcon"></div>
                <div class="NoticeText">
                    这件物品的使用次数有限。
                    <br />使用次数：&nbsp;
                    <span class="LimitedUseQuantity"></span>
                </div>
            </div>
            <div id="ItemDetailsMiniPopupDescription" style="display: none;"></div>
            <div class="ItemAttribute PrizePool" style="display: none;">
                每份门票的售出都会使总奖金增加</div>
            <div class="ItemAttribute Compendium" style="display: none;">
                互动手册已启用</div>
            <div class="ItemAttribute Fantasy" style="display: none;">梦幻联赛已启用</div>
        </div>

        <!-- Modal -->
        <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="position: fixed; z-index: 9999; top: 180px; left: 15px;">
            <div class="modal-dialog">
                <center>
                    <div class="modal-content" style="background-image: url(http://cdn.dota2.com.cn/apps/dota2/images/store/bg_modal.jpg);width: 458px;height: 216px;">
                        <div id="CartConfirmModalSuccess" style="display: block;">
                            <h2 style="margin: 0;padding: 36px 0 12px 0;font-size: 20px;font-weight: normal;color: #c6c6c6;">物品已加入购物车。</h2>
                            <p style="padding: 10px 0 13px 0;;"></p>
                            <div class="GreenButton BigButton ModalConfirmButton" onclick="CloseCartConfirmDlg();" data-dismiss="modal">继续购物</div>
                        </div>
                    </div>
                </center>
            </div>
        </div>  
        <script>
            $('#StoreSearchInput').blur(function(){
                document.form1.submit();
            });
            $('.ItemContainerCell_Base').live('mouseover',function(){
                    var left = $(this).offset().left;
                    var top = $(this).offset().top;
                    if(left < 500){
                        left = left + 211 + 'px';
                    }else{
                        left = left - 313 + 'px';
                    }
                    top = top + 8 + 'px';
                    $(this).children().nextAll('.ItemText_Base').css('display','none');
                    $(this).children().nextAll('.HoverContentContainer_Base').css('display','block');
                 timer=setTimeout(function(){
                    $('#ItemDetailsMiniPopup').css('left',left);
                    $('#ItemDetailsMiniPopup').css('top',top);
                    $('#ItemDetailsMiniPopup').css('display','block');
                 },400);
            });

            $('.ItemContainerCell_Base').live('mouseout',function(){
                clearTimeout(timer);
                $('#ItemDetailsMiniPopup').css('display','none');
                $(this).children().nextAll('.ItemText_Base').css('display','block');
                $(this).children().nextAll('.HoverContentContainer_Base').css('display','none');
            });

            $('.HoverContentContainer_Base').live('click', function(event) {
                var gid = $(this).prevAll('.myhiddenid').html();
                $.ajax({
                    type: 'post',
                    url: '<{:U("Home/Cart/addCart")}>',
                    data: 'gid='+gid,
                    dataType: 'json',
                    async: false,
                    success:function(msg){
                        if(msg == 'false'){
                            $('.modal-content').empty();
                            $('.modal-content').html('<h2 style="margin: 0;padding: 36px 0 12px 0;font-size: 20px;font-weight: normal;color: #c6c6c6;">请先登录~</h2><p style="padding: 10px 0 13px 0;"></p><div class="GreenButton BigButton ModalConfirmButton" data-dismiss="modal" onclick="login()">登录</div>');
                        }
                    }
                });
            });

            function login(){
                var url = "<{:U('Home/Login/index')}>";
                window.location = url;
            }
            
            $('.ItemContainerCell_Base').live('mouseover mouseout', function(event) {
                var myrank = $(this).children('#myhidden').html();
                var rank = 'rank'+myrank;
                var rarity = '';
                if(myrank == 1){myrank = '稀有';rarity = 'rarityRare';}
                else if(myrank == 2){myrank = '至宝';rarity = 'rarityArcana';}
                else if(myrank == 3){myrank = '神话';rarity = 'rarityMythical';}
                else if(myrank == 4){myrank = '传说';rarity = 'rarityLegendary';}
                else{myrank = '普通';rarity = 'rarityCommon';}
                if (event.type == 'mouseover') {
                    $(this).children('.ItemImage_Base').addClass(rank);
                    $('#ItemDetailsMiniPopup').find('#rarity').removeClass();
                    $('#ItemDetailsMiniPopup').find('#rarity').addClass(rarity);
                    $('#ItemDetailsMiniPopup').find('#rarity').addClass('rarityCell');
                    var s = $(this).find('img').attr('src');
                    $('#ItemDetailsMiniPopup').find('.portrait').css('background-image',"url("+s+")");
                    $('#ItemDetailsMiniPopup').find('.name').html($(this).find('.ItemName_Base').html());
                    $('#ItemDetailsMiniPopup').find('.UsageInfo_usedBy').html($(this).find('.PlayerClass').html());
                    $('#ItemDetailsMiniPopup').find('.rarity').html(myrank);
                } else {
                    $(this).children('.ItemImage_Base').removeClass(rank);
                    // $('#ItemDetailsMiniPopup').find('.Portrait').css('background-image','none');
                }
            })
            
        </script>

</block>

